<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>爬虫服务</title>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>欢迎来到蔚蓝图书列表爬虫服务</h1>
<p>点击下方开始爬取:</p>
<button id="send">开始爬虫</button>
<br><br>
<div class="progress" hidden>
    <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"
         style="width: 1%">1%
    </div>
</div>
</body>
<script>
    function set_progress_rate(rate) {
        $(".progress-bar").attr("aria-valuenow", rate);
        $(".progress-bar").text(rate + "%");
        $(".progress-bar").css("width", rate + "%");
    };

    $("#send").click(function () {
        $(".progress").show();

        let i = 1;
        let stop = 100;
        let timer = window.setInterval(function () {
            i = i + 5;
            if (i >= stop) {
                i = stop;
                window.clearInterval(timer);
            }
            set_progress_rate(i);
        }, 100);
    });

</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("button").click(function () {
        $.get("/button1", function (data, status) {
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
</script>
</html>
